<template>
  <div>
    <el-dialog :visible.sync="moveDialog" title="好友分享">
      <el-breadcrumb separator="/" style="margin-top: 20px">
        <el-breadcrumb-item>
          <a @click.prevent="toCommonFn">根目录</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in urlpath" :key="item.title">
          <a @click.prevent="backwjFn(item.path, index)">{{ item.title }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div
        class="item"
        v-for="(item, index) in pagelist"
        :key="getRandomInt(index)"
        @dblclick="openFn(item)"
        @click="selectFn(item, index)"
        :class="{ active: index == number }"
      >
        <template>
          <img :src="require('../../assets/' + item.imgtype + '.png')" />
          <span>{{ item.title }}</span>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moveDialog = false">取 消</el-button>
        <el-button type="primary" @click="move">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "friends-file-move",
  props:{
    filedir:{
      type:String,
      default:'common/'
    }
  },
  data() {
    return {
      moveDialog: false,
      moveFile: "",
      file_name: "",
      move_base: "",
      number: null,
      pagelist: "",
      baseDir: "",
      urlpath: [],
      title:""
    };
  },
  created() {},
  methods: {
    getRandomInt() {
      Math.floor(Math.random() * 100 + 1);
    },
    move() {
      if (this.title) {
              this.$https
        .get("/common/down", {
          params: { name: this.baseDir, title: this.title },
        })
        .then((res) => {
          if (res.code == 200) {
            let fxurl = `${res.data}&title=${this.title}`;
            this.moveDialog=false;
            this.$emit('send',fxurl)
          }
        });
      } else {
        this.$message.error("请选中要分享的文件");
      }
    },
    selectFn(item, index) {
      this.number = index;
      this.baseDir = `${item.name}`;
      this.title=item.title
    },
    open(moveFile) {
      this.getwjlist(moveFile);
      this.moveFile = moveFile;
      let file_names = moveFile.split("/");
      this.file_name = moveFile.substr(moveFile.length-'/'.length,'/'.length) === '/'?file_names[file_names.length-2]+"/":file_names[file_names.length-1];
      this.move_base = moveFile.substring(0,moveFile.indexOf(this.file_name))
      this.moveDialog = true;
    },
    openFn(item) {
      let name = item.name;
      this.getwjlist(name);
      this.urlpath.push({ title: item.title, path: item.name });
      this.title=null;
    },
    getwjlist(dir) {
      this.$https.get("/common/getall", { params: { dir } }).then(res => {
        this.pagelist = res.data;
      });
    },
    toCommonFn() {
      this.urlpath=[]
      this.getwjlist(this.filedir);
    },
    backwjFn(path, index) {
      this.urlpath.splice(index + 1, this.urlpath.length);
      this.getwjlist(path);
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: left;
  background-color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  img {
    width: 70px;
    height: 70px;
  }
  span {
    padding-top: 10px;
  }
  &:hover {
    background-color: rgba(179, 179, 179, 0.333);
  }
}
.active {
  background-color: rgba(179, 179, 179, 0.333);
}
</style>
